<template>
  <div class="demo">
    <div class="demo-title">基本使用</div>
    <div class="demo-content">
      <h2>use Select.Option</h2>
      <Space>
        <Select
          ref="select"
          v-model:value="value1"
          style="width: 120px"
          @focus="focus"
          @change="handleChange"
        >
          <Select.Option value="jack">Jack</Select.Option>
          <Select.Option value="lucy">Lucy</Select.Option>
          <Select.Option value="disabled" disabled>Disabled</Select.Option>
          <Select.Option value="Yiminghe">yiminghe</Select.Option>
        </Select>
        <Select v-model:value="value2" style="width: 120px" disabled>
          <Select.Option value="lucy">Lucy</Select.Option>
        </Select>
        <Select v-model:value="value3" style="width: 120px" loading>
          <Select.Option value="lucy">Lucy</Select.Option>
        </Select>
      </Space>
      <h2 style="margin-top: 10px">use options (recommend)</h2>
      <Space>
        <Select
          ref="select"
          v-model:value="value1"
          style="width: 120px"
          :options="options1"
          @focus="focus"
          @change="handleChange"
        />
        <Select v-model:value="value2" style="width: 120px" disabled :options="options2"></Select>
        <Select v-model:value="value3" style="width: 120px" loading :options="options3"></Select>
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Space from '@sscd/space';
  import Select from '@sscd/select';
  import type { SelectProps } from '@sscd/select';
  const value1 = ref('lucy');
  const value2 = ref('lucy');
  const value3 = ref('lucy');
  const options1 = ref<SelectProps['options']>([
    { value: 'jack', label: 'Jack' },
    { value: 'lucy', label: 'Lucy' },
    { value: 'disabled', label: 'Disabled', disabled: true },
    { value: 'yiminghe', label: 'Yiminghe' },
  ]);
  const options2 = ref<SelectProps['options']>([{ value: 'lucy', label: 'Lucy' }]);
  const options3 = ref<SelectProps['options']>([{ value: 'lucy', label: 'Lucy' }]);
  const focus = () => console.log('focus');
  const handleChange = (value) => console.log(`selected ${value}`);
</script>
